import { Divider } from 'antd'
import { fabric } from 'fabric'
import { useEffect } from 'react'

export default function View() {
  // 矩形
  const rect = new fabric.Rect({
    top: 30,
    left: 30,
    width: 30,
    height: 30,
    fill: 'darkcyan'
  })

  // 圆形
  const circle = new fabric.Circle({
    top: 30,
    left: 100,
    radius: 30,
    fill: '#aa96da'
  })

  useEffect(() => {
    const canvas = new fabric.Canvas('c', {
      width: 1000,
      height: 1000
    })

    canvas.add(rect, circle)

    // 监听画布点击鼠标事件
    canvas.on('mouse:down', options => {
      console.log(`当前选中的元素：${options.target ? options.target.type : 'canvas'}`)
      console.log(options) // 将点击事件获得的对象输出到控制台
    })

    // 监听画布点击鼠标事件
    canvas.on('mouse:up', options => {
      console.log('mouse:up事件：', options)
    })

    // 监听矩形移动
    rect.on('moving', options => {
      console.log('rect moving事件：', options)
    })
  }, [])

  return (
    <div className='view-wrapper'>
      <Divider plain>图片</Divider>
      <canvas id='c' style={{ border: '1px solid #ccc' }}></canvas>
    </div>
  )
}
